<template>
	<div class="match">
		<cmp-crumb :list="crumb"></cmp-crumb>
		<div class="lesson-form">
			<el-form :inline="true" :model="params" class="demo-form-inline">
				<el-form-item label="竞赛单元">
					<el-select size="small" v-model="params.competitionModule" placeholder="请选择类型" @change="selectchange">
						<el-option label="信息素养" value="1"></el-option>
						<el-option label="阅读推广" value="2"></el-option>
						<el-option label="馆员能力提升" value="3"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="竞赛类型">
					<el-select size="small" v-model="params.pkType" placeholder="请选择类型" @change="selectchange">
						<el-option label="模拟赛" value="1"></el-option>
						<el-option label="选拔赛" value="2"></el-option>
						<el-option label="省赛" value="3"></el-option>
						<el-option label="国赛" value="4"></el-option>
					</el-select>
				</el-form-item>
				<!-- 			<el-form-item label="按方向">
					<el-select size="small" v-model="params.categoryId" placeholder="请选择方向" @change="getList">
						<el-option label="全部" value=""></el-option>
						<el-option label="模拟赛" value="模拟赛"></el-option>
						<el-option label="选拔赛" value="选拔赛"></el-option>
						<el-option label="国赛" value="国赛"></el-option>
					</el-select>
				</el-form-item> -->
				<el-form-item label="按热度">
					<el-select size="small" v-model="params.orderby" placeholder="请选择类型" @change="selectchange">
						<el-option label="最新" value="最新"></el-option>
						<el-option label="最热" value="最热"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<div class="search">
				<el-input placeholder="请输入关键字检索" suffix-icon="el-icon-search" v-model="queryStr"
					@keyup.enter.native="selectchange">
				</el-input>
			</div>
		</div>
		<div class="match-list" v-if="list && list.length != 0">
			<div class="match-item" v-for="item in list">
				<div class="match-item-title">{{item.title}}</div>
				<div class="item-time">发表时间：{{item.createTime}}</div>
				<!-- <div class="item-time">开始时间：{{item.startTime}}</div> -->
				<div class="item-intro" v-html="item.content"></div>
				<div class="item-btn" @click="application(item)">立即报名</div>
			</div>
			<div class="page-cont">
				<el-pagination :page-size="pageSize" :hide-on-single-page="true" background layout="prev, pager, next"
					:total="total" @current-change="pageNumChange">
				</el-pagination>
			</div>
		</div>
		<div class="match-list" v-else>
			<el-empty description="暂无竞赛信息"></el-empty>
		</div>
	</div>
</template>

<script>
	import {
		getCompetitionListApi,
		playCompetitionApi
	} from '@/api/Match'
	import {
		getArticleTagApi
	} from '@/api/Article'
	import cmpCrumb from '@/components/cmp-crumb'
	export default {
		data() {
			return {
				crumb: [{
					title: '主页',
					url: '/'
				}, {
					title: '竞赛平台',
					url: '/Match'
				}],
				token: this.$store.state.app.token || this.$cookies.get('sy_token'),
				articleId: 2356,
				tags: [],
				params: {

				},
				queryStr: '',
				total: 0,
				list: [],
				pageNum: 1,
				pageSize: 8,
				selectItem: null
			}
		},
		created() {
			this.getTags()
			this.getList()
		},
		methods: {
			selectchange() {
				this.pageNum = 1
				this.getList()
			},
			application(item) {
				if (!this.token) {
					this.$confirm('您还未登陆，没有权限，请登陆后重试！', '提示', {
						confirmButtonText: '去登陆',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						this.$router.push('/Login')
					}).catch(() => {});
				}
				this.selectItem = item
				this.$confirm('确定参加' + item.title + '吗？', '提示', {
					confirmButtonText: '参加',
					cancelButtonText: '取消',
				}).then(() => {
					setTimeout(() => {
						this.applicationFn()
					}, 500)

				}).catch(() => {

				});
			},
			applicationFn() {
				playCompetitionApi({
					competitionID: this.selectItem.recId
				}).then(res => {
					if (res.code == 200) {
						this.$message({
							type: 'success',
							message: res.msg
						})
					}
				})
			},
			getTags() {
				getArticleTagApi({
					menuid: this.articleId
				}).then(res => {
					let list = res.data,
						obj = {
							"recId": '',
							"tagName": "全部",
						}
					list.unshift(obj)
					this.tags = list
				})
			},
			getList() {
				let obj = this.params
				// obj.menuid = this.articleId
				obj.queryStr = this.queryStr
				obj.pageNum = this.pageNum
				obj.pageSize = this.pageSize
				getCompetitionListApi(obj).then(res => {
					this.list = res.rows
					this.total = res.total
				})
			},
			pageNumChange(index) {
				this.pageNum = index
				this.getList()
			}
		},
		components: {
			cmpCrumb
		}
	}
</script>

<style lang="less">
	@contWidth: 1280px;

	.match {
		background-color: #F7F7F7;
		min-height: calc(100vh - 120px);

		.lesson-form {
			margin: 16px auto;
			width: @contWidth;
			display: flex;
			justify-content: space-between;
			padding: 20px 37px;
			background: #fff;
			margin-bottom: 26px;
		}

		.el-form-item {
			margin-bottom: 0;
		}

		.el-form-item__content {
			width: 150px;
		}

		.search {
			.el-input__inner {
				border-radius: 18px;
				width: 295px;
				height: 36px;
			}
		}

		.match-list {
			width: @contWidth;
			margin: 0 auto;
			padding: 46px 88px;
			background-color: #fff;
			display: flex;
			flex-wrap: wrap;
		}

		.match-item {
			width: 530px;
			height: 278px;
			border-radius: 13px;
			background: #F4F8FF;
			margin-bottom: 37px;
			padding: 22px 30px 28px;
			transition: all 0.5s;

			.match-item-title {
				font-size: 27px;
				font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
				font-weight: 500;
				color: #333333;
				margin-bottom: 15px;
			}

			.item-time {
				margin-bottom: 20px;
				font-size: 13px;
				font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
				font-weight: 400;
				color: #666666;
			}

			.item-intro {
				height: 60px;
				margin-bottom: 30px;
				font-size: 13px;
				font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
				font-weight: 400;
				color: #666666;
				line-height: 17px;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 3;
				overflow: hidden;

				p {
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 3;
					overflow: hidden;
				}
			}

			.item-btn {
				width: 103px;
				height: 39px;
				background: #0A8CFF;
				border-radius: 5px;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 17px;
				font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
				font-weight: 500;
				color: #FFFFFF;
				cursor: pointer;
			}

			&:nth-of-type(2n -1) {
				margin-right: 42px;
			}

			&:hover {
				background: #F9F9F9 linear-gradient(180deg, #4162FF 0%, #35CCFF 100%);

				.match-item-title {
					color: #fff;
				}

				.item-time {
					color: #fff;
				}

				.item-intro {
					color: #fff;
				}

				.item-btn {
					background: #FE7C3E;
				}
			}


		}

		.page-cont {
			width: 100%;
			padding: 38px 0 46px;
			display: flex;
			justify-content: center;
		}

		.el-empty {
			width: 100%;
		}
	}
</style>